<template>
  <view>
    <!-- 这里是子传父！！一定要和子组件一样的才行哦！！！ -->
    <Tabs :tabsData="tabsData" @sedTabsIndex="changeTabs" />
    <view class="order_list">
      <view class="order_item" v-for="item in orders" :key="item.order_id">
        <view class="order_item_row">
          <text class="order_item_row_left">订单编号</text>
          <text class="order_item_row_right">{{ item.order_number }}</text>
        </view>
        <view class="order_item_row">
          <text class="order_item_row_left">订单金额</text>
          <text class="order_item_row_right price">{{ item.order_price }}</text>
        </view>
        <view class="order_item_row">
          <text class="order_item_row_left">订单日期</text>
          <text class="order_item_row_right">{{ item.update_time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index.vue";
import { getOrdersAll } from "@/api";
import { time } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
export default {
  components: {
    Tabs,
  },
  data() {
    return {
      tabsData: [
        { id: 1, type: 1, text: "全部" },
        { id: 2, type: 2, text: "待付款" },
        { id: 3, type: 3, text: "待发货" },
      ],
      type: 1,
      orders: [],
    };
  },
  // computed: {
  //   creatTime() {
  //     // 转时间戳为时间：
  //     const date = new Date();
  //     // console.log(orders.create_time(date));
  //     return date;
  //   },
  // },
  onLoad() {
    this.getOrdersData();
  },
  methods: {
    //  这里的函数是可以自己定义的！！
    async getOrdersData() {
      // const res = await getOrdersAll({
      //   type: this.type,
      // });
      // console.log(res);
      // this.orders = res.data.message.orders;
      // console.log(this.orders);
      // 解构：
      const { orders } = (
        await getOrdersAll({
          type: this.type,
        })
      ).data.message;
      this.orders = orders;
      console.log(orders);
    },
    changeTabs(index) {
      const { type } = this.tabsData[index];
      this.type = type;
      this.getOrdersData();
    },
  },
};
</script>

<style lang="less" >
page {
  background-color: #f9f9f9;
}
.order_list {
  .order_item {
    margin: 15rpx 0;
    padding: 30rpx;
    background-color: #fff;
    border: 1rpx solid #ccc;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: space-around;
    height: 250rpx;
    width: 750rpx;
    box-sizing: border-box;
    .order_item_row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      color: #909090;
    }
  }
}
</style>